<template>
  <!-- 评论id 回答  用户名  评论内容  评论的回复  评论点赞数  审核状态 -->
  <div class="course-user-page">
    <div class="head">全部评论</div>
    <div class="select-button">
      <el-row>
        <el-col :span="18">
          <el-row :gutter="10">
            <el-col :span="6">
              <el-input v-model="inputNickname" placeholder="请输入用户姓名关键词"  ></el-input>
            </el-col>
            <el-col :span="6">
              <el-input v-model="inputContent" placeholder="请输入评论内容关键词"  ></el-input>
            </el-col>
            <el-col :span="6">
              <el-input v-model="inputAnswerId" placeholder="请输入回答id"></el-input>
            </el-col>
            <el-col :span="6">
              <el-select v-model="selectExamineState" clearable placeholder="请选择审核状态">
                <el-option
                    v-for="item in examineStateList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="5" :offset="1">
          <el-button type="primary" plain @click="pageAnswerComment()" >筛选评论</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="student-list" style="display: flex;flex-direction: column;align-items: center">
      <el-table :data="tableData" border style="width: 100%">
        <!--        <el-table-column type="selection" width="55">-->
        <!--        </el-table-column>-->
        <el-table-column fixed prop="id" label="评论ID" min-width="50%" align="center">
        </el-table-column>
        <el-table-column prop="nickname" label="用户昵称" min-width="40%" align="center" >
        </el-table-column>
        <el-table-column prop="answer" label="回答" min-width="70%" align="center" >
        </el-table-column>
        <el-table-column prop="content" label="评论" min-width="80%" align="center" >
        </el-table-column>
        <el-table-column prop="reply" label="回复" min-width="30%" align="center" >
        </el-table-column>
        <el-table-column prop="goodNumber" label="点赞" min-width="30%" align="center" >
        </el-table-column>
        <el-table-column prop="status" label="审核状态" min-width="50%" align="center" >
        </el-table-column>
        <el-table-column prop="gmtCreate" label="创建时间" min-width="50%" align="center" >
        </el-table-column>
        <el-table-column prop="gmtModified" label="更新时间" min-width="50%" align="center" >
        </el-table-column>

        <el-table-column label="操作" align="center" fixed="right" width="80">
          <template slot-scope="scope">
            <el-button @click="showOperationModel(scope.row.id,scope.$index)" type="text" size="medium">操作</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="block" style="margin-top: 20px">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[8, 10, 20, 40]"
            :page-size="8"
            layout="total, sizes, prev, pager, next, jumper"
            :total="parseInt(total)">
        </el-pagination>
      </div>
    </div>


    <el-dialog title="操作" show-close :visible.sync="answerCommentBindDialogVisible">
      <el-form label-width="120px">
        <el-form-item label="审核操作" v-if="currentAnswerCommentInfo.status=='待审核'">
          <el-button @click="approve" type="success" size="medium">审核通过</el-button>
          <el-button @click="failed" type="danger" size="medium">审核不通过</el-button>
        </el-form-item>
        <el-form-item label="评论内容">
          <el-input v-model="currentAnswerCommentInfo.content"></el-input>
        </el-form-item>
        <el-form-item label="评论回复">
          <el-input v-model="currentAnswerCommentInfo.reply"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="answerCommentBindDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="update">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "StudentManageView",
  data() {
    return {
      total: 0,
      currentSize: 8,
      currentPage: 1,
      examineStateList: [{
        value: 0,
        label: '待审核'
      }, {
        value: 1,
        label: '审核通过'
      }, {
        value: 2,
        label: '审核不通过'
      }],
      selectExamineState: '',


      inputNickname:"",
      inputContent:'',
      inputAnswerId:'',
      visibilityTypes:["仅自己可见","仅关注可见","全部可见"],
      inputUpdateKeyword:"",

      answerCommentBindDialogVisible: false,
      currentAnswerCommentId: "",
      currentAnswerCommentInfo: {
        id: null,
        content:"",
        status:"",
        description:'',
        reply:""
      },

      answerCommentId : "",
      auditId : "",
      questionId: "",
      answerId: "",


      departmentTree: null,
      loading: false,
      debounceClock: null,

      tableData: [],
    };
  },
  mounted() {
    this.questionId = this.$route.params.id
    this.answerId = this.$route.query.answerId
    this.answerCommentId = this.$route.query.linkId
    this.auditId = this.$route.query.auditId
    this.pageAnswerComment();
  },
  methods: {
    pageAnswerComment() {
      this.$api.pageAnswerComment({
        pageSize: this.currentSize,
        pageNow: this.currentPage,
        nickname: this.inputNickname || '',
        answerId: this.answerId || '',
        content:this.inputContent || "",
        status: this.selectExamineState,
        id:this.answerCommentId,
        questionId : this.questionId
      })
          .then((res) => {
            let list = res.data.rows;
            console.log(list)
            this.total = res.data.totalPage
            this.tableData = list
            for (let i = 0; i < list.length; i++) {
              list[i].gmtCreate = this.gmtToDate(list[i].gmtCreate)
              list[i].gmtModified = this.gmtToDate(list[i].gmtModified)
              // if(list[i].visibility==0){
              //   list[i].visibility = "仅自己可见"
              // }
              // if(list[i].visibility==1){
              //   list[i].visibility = "仅关注可见"
              // }
              // if(list[i].visibility==2){
              //   list[i].visibility = "全部可见"
              // }
            }
          });
    },
    handleSizeChange(val) {
      this.currentSize = parseInt(val);
      this.pageAnswerComment();
    },
    handleCurrentChange(val) {
      this.currentPage = parseInt(val);
      this.pageAnswerComment();
    },

    showOperationModel(answerCommentId,index) {
      this.currentAnswerCommentId = answerCommentId
      this.currentAnswerCommentInfo = this.tableData[index]
      this.answerCommentBindDialogVisible = true
    },

    //审核的两项操作
    approve(){
      this.currentAnswerCommentInfo.status = "审核通过"
      this.$api.answerCommentApproveExamine(this.currentAnswerCommentId)
    },
    failed(){
      this.currentAnswerCommentInfo.status = "审核不通过"
      this.$api.answerCommentFailedExamine(this.currentAnswerCommentId)
    },

    update() {
      console.log(this.currentAnswerCommentInfo)
      this.$api.answerCommentUpdata(this.currentAnswerCommentInfo).then(res => {
        this.answerCommentBindDialogVisible = false
        console.log(res)
        this.pageAnswerComment()
      })
    },


    gmtToDate(gmt) {
      let da = new Date(gmt);
      let year = da.getFullYear();
      let month = da.getMonth() + 1;
      let date = da.getDate();
      let hours = da.getHours();
      let minutes = da.getMinutes();
      let seconds = da.getSeconds();
      return [year, month, date].join("-") + " " + [hours, minutes, seconds].join(':');
    }
  },
  watch: {

  }
};
</script>

<style scoped>
.course-user-page{
  margin-top: 20px;
  width: 100%;
}


.head {
  padding-bottom: 10px;
}

.select-button {
  padding: 10px 0;
}

.student-list {
  width: 100%;
  padding: 10px 0;
  display: flex;
}
</style>
